<template>
    <div id="app">
        <c-menu></c-menu>
        <transition :name="transitionName">
            <keep-alive>
                <router-view class="page child-view" :class="pageClass"></router-view>
            </keep-alive>
        </transition>
    </div>
</template>
<script>
import permissions from '@/common/permissions';
import cMenu from '@/components/menu'

require('./assets/less/main.less');

var isBack = false;

export default {

    name: 'app',

    data() {
        return {
            transitionName: 'slide-left',
        }
    },

    components: {
        cMenu,
    },

    computed: {

        muneState() {
            return this.$store.state.menu.status.show;
        },

        pageClass() {
            let vClass = '';
            if (this.muneState) {
                vClass = 'tranX';
            }else{
                vClass = '';
            }
            return vClass;
        }
    },

    created() {
        let tthis = this;

        this.$router.__proto__.goBack = function() {
            tthis.transitionName = 'slide-right';
            isBack = true;　　
            window.history.go(-1);
            setTimeout(function() {
                tthis.transitionName = 'slide-left';
            }, 100)
        }

        document.body.onclick = function(e) {
            if (e.target.tagName == 'A') {
                if (e.target.getAttribute('href').indexOf('http') > -1) {
                    e.target.setAttribute('target', '_blank');
                }
            }
            // console.log(e.target)
        }
    },

}
// 'transform: translateX(180px)'

</script>

<style lang="less" scoped>
.tranX{
    transform: translateX(180px);
}
</style>
